<template>
<!-- 审批-->
  <div>
      <div class="nav-bar-apply">
          <div class="icon-left" @click="clickGoBackHandle"><van-icon  class="icon" name="arrow-left" />{{changeData.back}}</div>
          <div class="nav-title">{{changeData.title}}</div>
          <div class="nav-right" ><van-icon class="more-icon" name="ellipsis"/></div>
      </div>
<van-tabs v-model="active" title-active-color="orange" color="#fff">
  <van-tab title="全部">
      <div class="event" v-if="isCancel">
          <div class="info">
              <div class="img"> <img src="../../assets/img/wulei.jpg" alt=""> </div>
              <div class="name-phone">
                  <div class="name">李洁</div>
                  <div class="phone">12341234123</div>
              </div>
              <div class="change" :style="changeColor">{{agree}}</div>
          </div>
          <div class="is-show" v-if="isShow">已提交，待主管审核</div>
          <div class="reason">请假事由：参加同事子女的婚礼</div>
          <div class="time-box">
              <div class="title">请假时间</div>
              <div class="start-end">
                  <div class="start">开始时间</div>
                  <div>结束时间</div>
              </div>
              <div class="time">
                  <div class="start-time">11:00</div>
                  <div>14:00</div>
              </div>
          </div>
          <div class="view-box">
              <div class="view">以下为审批人的批复意见</div>
              <div class="state">
                  <span class="circle"></span>
                  <span class="state-word">{{zhuguan}}</span>
              </div>
          </div>
          <div class="review-box">
              <div class="agree" @click="agreeHandle">同意</div>
              <div class="cancel" @click="cancelHandle">取消</div>
              <div class="transfer">转审批人</div>
              <div class="review">回复</div>
          </div>
      </div>
  </van-tab>
  <van-tab title="我收到的">内容 2</van-tab>
  <van-tab title="我发起的">内容 3</van-tab>
  <van-tab title="抄送我的">内容 4</van-tab>
</van-tabs>
  </div>
</template>

<script>
export default {
    name:'Approval',
data(){
    return{
        zhuguan:'主管：待审批',
        isCancel:true,
        isShow:true,
        changeColor:{
            color:'orange'
        },
        agree:'待审核',
        active:0,
        changeData:{
            back:'返回',
            title:'更改信息',
        }
    }
},
methods:{
    clickGoBackHandle(){
        this.$router.back()
    },
    agreeHandle(){
        this.agree = '同意',
        this.changeColor={
            color:'green'
        },
        this.isShow = false,
        this.zhuguan = "主管：已审批"
    },
    cancelHandle(){
        this.isCancel = false
    }
}
}
</script>

<style scoped lang="less">
    .nav-bar-apply{
        height: 1.3rem;
        line-height:1.3rem;
        background-color: #fff;
        color:#000;
        position: relative;
        border-bottom:0.5px solid #ccc;
        .icon-left{
            float:left;
            color:#4e90ff;
            margin-left:0.6rem;   
            .icon{
                position:absolute;
                top:0.32rem;
                left:0.06rem;
                font-size: 30px;
            }
        }
        .nav-title{
            float:left;
            margin-left: 1.8rem;
            font-weight:600;
            letter-spacing: 1px;
        }
        .nav-right{
            float:right;
            margin-right:10px;
            color:#4e90ff;
            i{
                margin-top:0.26rem;
                font-size:25px;
            }
        }
    }
    .event{
        margin-top:10px;
        padding:10px;
        background-color: #fff;
        overflow: hidden;
        .info{
            .img{
                float:left;
                width:0.9rem;
                height:0.9rem;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width:100%;
                    height:100%;                   
                }
            }
            .name-phone{
                float: left;
                margin-left:10px;
                .name{
                    font-weight: 600;
                    margin-bottom:5px;
                    color:#333;
                }
                .phone{
                    color:#999;
                    font-size:14px;
                }
                }
            .change{
                float:right;
                font-size: 14px;
            }
        }
        .is-show{
            clear:both;
            padding-top:15px;
            margin-bottom:10px;
            font-size:14px;
            font-weight: 600;
        }
        .reason{
            clear:both;
            padding-top:20px;
            margin-bottom:20px;
            font-size:20px;
            font-weight:bold;
        }
        .time-box{
            padding:15px;
            background-color: #eee;
            display:flex;
            text-align: center;
            font-weight:600;
            margin-bottom:15px;
            .time{
               flex:1;
            }
            .start-end{
                flex:1;                
                .start{
                    margin-bottom:15px;
                }
            }
            .time{
                flex:1;
                .start-time{
                    margin-bottom:15px;
                }
            }
        }
        .view-box{
            padding:20px;
            background-color: #eee;
            font-weight:600;
            position: relative;
            margin-bottom:15px;
            .view{
                margin-bottom:15px;
            }
            .state{              
                .circle{
                    width:0.4rem;
                    height:0.4rem;
                    background-color:orange;
                    border-radius: 50%;
                    position:absolute;
                    top:0.95rem;
                    left:0.4rem;
                }
                .state-word{
                    margin-left:0.7rem;
                }
            }
        }
        .review-box{
            padding:15px;
            background-color: #fff;
            font-size:14px;
            font-weight:bold;
            display:flex;
            div{
                flex:1;
                text-align:center;
                position:relative;
            }
            .agree::after,.cancel::after,.transfer::after{
                content:'';
                display:block;
                width:1px;
                height:20px;
                background-color:#000;
                position: absolute;
                right:0;
                top:0;
            }
        }
    }

</style>